<template>
  <div>
    <!-- 添加一个视频模板 -->
    <div class="videoPost" v-if="post.type == 2">
      <div class="title" @click="toDetail">{{post.title}}</div>
      <div class="cover" @click="toDetail">
        <img :src="$fixImgUrl(post.cover[0].url)" alt class="coverImg" />
        <div class="btnWrapper">
          <div class="iconfont iconshipin"></div>
        </div>
      </div>
      <div class="info">{{post.user.nickname}} {{post.comment_length}}跟帖</div>
    </div>
    <!-- 第一种模板,封装图片,1到2张 -->
    <div class="singleImgpost" v-else-if="post.cover.length > 0 && post.cover.length < 3">
      <div class="left">
        <div class="title" @click="toDetail">{{post.title}}</div>
        <div class="info">{{post.user.nickname}} {{post.coment_length}}跟帖</div>
      </div>
      <img :src="$fixImgUrl(post.cover[0].url)" alt class="imgRight" @click="toDetail" />
    </div>

    <!-- 第二种模板,封面图片大于等于3张的情况 -->
    <div class="multipImdePost" v-else-if="post.cover.length >=3">
      <div class="title" @click="toDetail">{{post.title}}</div>
      <div class="covers" @click="toDetail">
        <img :src="$fixImgUrl(post.cover[0].url)" alt class="coverImg" />
        <img :src="$fixImgUrl(post.cover[1].url)" alt class="coverImg" />
        <img :src="$fixImgUrl(post.cover[2].url)" alt class="coverImg" />
      </div>
      <div class="info">{{post.user.nickname}} {{post.commetn_length}}跟帖</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  methods: {
    toDetail() {
      this.$router.push({
        name: "postDetailPage",
        // 带上一个动态路由参数叫id
        params: {
          id: this.post.id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
// 判断一张图片样式
.singleImgpost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.778vw;
  border-bottom: 1px solid #e4e4e4;
  .left {
    flex: 1;
    height: 20.833vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 2.778vw;
  }
  .imgRight {
    width: 33.333vw;
    height: 20.833vw;
    object-fit: cover;
  }
}
// 判断三张图片样式
.multipImdePost {
  padding: 2.778vw;
  border-bottom: 1px solid #e4e4e4;
  .covers {
    display: flex;
    justify-content: space-between;
    margin: 1.389vw 0;
    .coverImg {
      width: 33%;
      height: 20.556vw;
      // 等比例缩放,不会导致图片变形,模糊
      object-fit: cover;
    }
  }
}
// 视频样式
.videoPost {
  padding: 2.778vw;
  border-bottom: 1px solid #e4e4e4;
  .cover {
    margin: 1.389vw 0;
    position: relative;
    .coverImg {
      width: 100%;
      height: 47.222vw;
      object-fit: cover;
    }
    .btnWrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        width: 15.278vw;
        height: 15.278vw;
        line-height: 15.278vw;
        background: rgba(0, 0, 0, 0.3);
        font-size: 12.778vw;
        color: #fff;
        text-align: center;
        border-radius: 50%;
      }
    }
  }
}
// 相同样式抽离
.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.info {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 14px;
  color: #868686;
}
</style>